<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入标签库-->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<!--项目名调整  -->
<%
	//key value
	// key 就是我们所说的名字
	// value 时存放路径 通过request请求中获取
	// request.getContextPath() 能拿到当前项目的路径 此时的路径是以/ 开始 ，没有/结束
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 
	web路径 
	不以/ 开始的相对路径，找资源。以当前资源的路径为基准经常容易出问题
	以/ 开始的相对路径，找资源。以服务器的路劲为标准(http://localhost:3306):需要加上项目名
	   http://localhost:3306/crud
	此时的项目名也不是定死的
 -->

<!-- 要想使用路径需要使用${ key }获取 -->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script type="text/javascript"
	src="${APP_PATH}/static/js/jquery-3.2.1.js"></script>
<!--引入 bootstrap样式，在根据自己的路径进行调整 -->
<!-- Bootstrap -->
<link
	href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script
	src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!--bootstrap  搭建显示页面  -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<!--  12列-->
			<div class="col-md-12">
				<!--  -->
				<h1>员工列表</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover">
					<tr>
						<th>id</th>
						<th>empName</th>
						<th>gender</th>
						<th>email</th>
						<th>deptName</th>
						<th>操作</th>
					</tr>
					<!-- 通过 c:foreach遍历数据 -->
					<!-- 因为此时数据在控制层下的list集合 var起个名字-->
					<c:forEach items="${pageInfo.list}" var="emp">
					<tr>
						<th>${emp.empId}</th>
						<th>${emp.empName }</th>
						<th>${emp.gender }</th>
						<%-- <th>${emp.gender=="M"?"男":"女"}</th> --%>
						<th>${emp.email }</th>
						<th>${emp.department.deptName }</th>
						<th>
							<button type="button" class="btn btn-primary btn-sm">
								<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
								编辑
							</button>
							<button type="button" class="btn btn-danger btn-sm">
								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
								删除
							</button>
						</th>
					</tr>
					
					</c:forEach>
					
					
				</table>

			</div>


		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<!--  分页信息-->
			<div class="col-md-6">
			
			当前${pageInfo.pageNum}页,总页码是${pageInfo.pages}页,总${pageInfo.total}总记录数
			<%-- <span>当前${pageInfo.PageNum}页</span> --%>
			<!--  -->
			</div>
			<!-- 分页条信息 -->
			<div class="col-md-6">
				<nav aria-label="Page navigation">
				<ul class="pagination">
					
					<!-- 首页信息  -->
					<li><a href="${APP_PATH}/emps?pn=1">首页</a></li>
					<c:if test="${pageInfo.hasPreviousPage }">
						<li><a href="${APP_PATH}/emps?pn=${pageInfo.pageNum-1}" aria-label="Previous"> 
					<span aria-hidden="true">&laquo;</span>
					</a></li>
					</c:if>
					
					<c:forEach items="${pageInfo.navigatepageNums}" var="page_Num">
					<!-- 判断一下此时是不是我们当前页码 -->
					<c:if test="${page_Num==pageInfo.pageNum }">
					<li class="active"><a href="#">${page_Num}</a></li>
					</c:if>
					<c:if test="${page_Num!=pageInfo.pageNum }">
					<li ><a href="${APP_PATH}/emps?pn=${page_Num}">${page_Num}</a></li>
					</c:if>
					</c:forEach>
					<!-- 是否有下一页 -->
					<c:if test="${pageInfo.hasNextPage}">
					<li><a href="${APP_PATH}/emps?pn=${pageInfo.pageNum+1}" aria-label="Next"> <span
							aria-hidden="true">&raquo;</span>
					</a></li>
					</c:if>
					
					<li><a href="${APP_PATH}/emps?pn=${pageInfo.pages}">尾页</a></li>
				</ul>
				</nav>
			</div>
		</div>


	</div>























</body>
</html>